<template>
	<view v-if="flag">
		<view class="newList">
			<view class="new-item" v-for="item in searchList">
				<view class="left">
					<text class="title">{{item.title}}</text>
					<view class="bar">
						<text>{{item.readNum}} 看过</text>
						<text>{{item.likeNum}} 点赞</text>
					</view>
				</view>
				<view class="right">
					<navigator :url="`/pages/news-detail/news-detail?id=${item.id}`">
						<image :src="$baseurl + item.cover" mode=""></image>
					</navigator>
				</view>
			</view>
			<u-loadmore :status="status" :load-text="loadText" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newsList: [],
				key: '',
				flag: false,
				status: 'nomore',
				loadText: {
					nomore: '我是有底线的'
				}
			};
		},
		onLoad(option) {
			this.key = option.key
			this.getSearchList()
		},
		methods: {
			getSearchList(key) {
				uni.request({
					url: this.$baseurl + '/prod-api/press/press/list',
					success: (res) => {
						console.log(res.data)
						this.newsList = res.data.rows
						this.flag = true
					}
				})
			}
		},
		computed: {
			searchList() {
				return this.newsList.filter(item => item.title.includes(this.key))
			}
		}
	}
</script>

<style lang="scss" scoped>
	view {
		.newList {
			padding: 20rpx;
			display: flex;
			flex-direction: column;

			.new-item {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				border-top: 2rpx solid #e4e7ed;
				padding: 20rpx 0;

				.left {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: fit-content;

					.title {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						width: 460rpx;
						line-height: 1.7;
						height: 110rpx;
						font-weight: bold;
						font-size: 32rpx;
					}

					.bar {
						display: flex;
						flex-direction: row;
						justify-content: start;
						margin-top: 40rpx;

						:nth-child(2) {
							margin-left: 20rpx;
						}

						text {
							font-size: 22rpx;
							color: #909399;
						}
					}
				}

				.right {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;

					image {
						width: 220rpx;
						height: 180rpx;
					}
				}

				&:last-child {
					border-bottom: 2rpx solid #e4e7ed;
				}
			}
		}
	}
</style>